<template>
  <div class="studWork">
    <van-sticky>
      <Header title="学业情况"/>
    </van-sticky>

    <div class="content">
      <van-cell-group>
        <van-cell>
          <img class="h_img"
               :src="eduUrl+'/jwfilepath/StudentPhotos/' + data.userId % 100 + '/' + data.userId + '.jpg'"
               alt="图片未正常加载！">
          <div class="text">
            <p class="stuName">{{ data.stuObject.name }}</p>
            <p class="stuNum">学号：{{ data.stuObject.number }}</p>
          </div>
        </van-cell>

        <van-cell>
          <div class="zxf">
            <img src="/src/image/xyqk_icon1.png" alt="" class="xskq_img">
            <span style="font-size: 1.1rem; vertical-align: middle; margin-left: 5px;color: #888888;">总学分:</span>
          </div>
          <template v-slot:right-icon>
            <div class="text_right">182.0 分</div>
          </template>
        </van-cell>

        <van-cell>
          <div class="zxf">
            <img src="/src/image/xyqk_icon2.png" alt="" class="xskq_img">
            <span style="font-size: 1.1rem; vertical-align: middle; margin-left: 5px; color: #888888">已完成学分:</span>
          </div>
          <template v-slot:right-icon>
            <div class="text_right">{{ data.stuObject.alreadyGetPoint }} 分</div>
          </template>
        </van-cell>

        <van-cell>
          <div class="zxf">
            <img src="/src/image/xyqk_icon3.png" alt="" class="xskq_img">
            <span style="font-size: 1.1rem; vertical-align: middle; margin-left: 5px; color: #888888">公选课学分:</span>
          </div>
          <template v-slot:right-icon>
            <div class="text_right">{{ data.stuObject.commonCourse }} 分</div>
          </template>
        </van-cell>

        <van-cell>
          <div class="zxf">
            <img src="/src/image/xyqk_icon4.png" alt="" class="xskq_img">
            <span style="font-size: 1.1rem; vertical-align: middle; margin-left: 5px; color: #888888">创新学分:</span>
          </div>
          <template v-slot:right-icon>
            <div class="text_right">{{ data.stuObject.creativeScore }} 分</div>
          </template>
        </van-cell>

        <van-cell>
          <div class="zxf">
            <img src="/src/image/xyqk_icon5.png" alt="" class="xskq_img">
            <span style="font-size: 1.1rem; vertical-align: middle; margin-left: 5px; color: #888888">平均绩点:</span>
          </div>
          <template v-slot:right-icon>
            <div class="text_right">{{ data.stuObject.averagePoint }} 分</div>
          </template>
        </van-cell>

        <van-cell>
          <div class="zxf">
            <img src="/src/image/xyqk_icon6.png" alt="" class="xskq_img">
            <span style="font-size: 1rem; vertical-align: middle; margin-left: 5px; color: #888888">补考课程数:</span>
            <span class="bkkc" style="margin-left: 5px;">{{ data.stuObject.reTestCnt }}</span>
          </div>
          <template v-slot:right-icon>
            <!--            <div class="text_right">{{ data.stuObject.reTestCnt }}</div>-->
            <van-icon @click="clickCourseList" name="descending" size="2rem"/>
          </template>
        </van-cell>
      </van-cell-group>

      <div v-show="showCourse">
        <div v-show="showCourseName">
          <van-cell v-for="(item, index) in data.stuObject.notPassCourseName" :key="index">
            <p>{{item}}</p>
          </van-cell>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>

import Header from "/@/components/Header/Header.vue";
import {getStudWork} from "/src/api/hbmy_wx/studWork";

const showCourseName = ref(false);

const eduUrl = import.meta.env.VITE_APP_EDU_URL;

const data = reactive({
  userId: null,
  stuObject: {}
})

async function initStuData() {

  const object = JSON.parse(localStorage.getItem('USERINFO'));
  // console.log('obj', object);
  data.userId = object.stud.id;

  await getStudWork().then((res) => {
    data.stuObject = res.response.value.extend.stu;
  }).catch((err) => {
    console.log(err);
  });

  // console.log('stuObject', data.stuObject);
}

onMounted(() => {
  initStuData();
})

// const showCourse = computed(() => {
//   return data.stuObject.reTestCnt > 0;
// })

function showCourse() {
  return data.stuObject.reTestCnt > 0;
}

function clickCourseList() {
  // console.log(showCourseName.value)
  showCourseName.value = showCourseName.value === false;
}

</script>

<style scoped lang="less">
.studWork {
  .content {
    margin: 5px 15px;
    .h_img {
      height: 120px;
      width: 90px;
    }

    .text {
      margin-left: 24px;

      .stuName {
        font-weight: 400;
        font-size: 1.2rem;
        margin-top: 10px
      }

      .stuNum {
        font-weight: 400;
        font-size: 1rem;
        color: #888888;
      }
    }

    .zxf {
      .xskq_img {
        width: 44px !important;
        height: 44px !important;
        vertical-align: middle;
      }
    }
  }
}

.text_right {
  font-size: 1rem;
  margin-right: 10px;
}

.bkkc {
  display: inline-block;
  padding: .15em .4em;
  min-width: 8px;
  border-radius: 18px;
  background-color: #f43530;
  color: #fff;
  line-height: 1.2;
  text-align: center;
  font-size: 1rem;
  vertical-align: middle
}

/deep/ .van-cell {
  margin: 0;
}

/deep/ .van-cell__value--alone {
  display: flex;
}

/deep/ van-divider van-divider--hairline {
  color: #888888;
}
</style>
